overview: Make the spacing dynamic depending on screen height

The HTML/CSS sizing prototype that was done back in the day for GNOME 40 has
a dynamic spacing depending on the height of the monitor. Let's try to
follow that more closely and make the spacing dependent on screen height.

For the sizing prototype, see
https://gitlab.gnome.org/Teams/Design/os-mockups/-/tree/master/overview/sizing-prototype

This also allows removing of a bit of manually added spacing at the top of
the dash.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3278>

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index db378ca1e4306fddb7964cdcae9388faebcfae7a..e49a259ae64c463fc1e975bee40a0c28c2605bf7 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -11,8 +11,6 @@ $dash_spacing: $base_margin * 0.5;
 
 // container for the dash
 #dash {
-  margin-top: $dash_edge_offset;
-
   // background behind item container
   .dash-background {
     background-color: $dash_background_color;

diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss b/data/theme/gnome-shell-sass/widgets/_overview.scss
index ac94f740f5d1788847dfc5fb867afacb5779b2c7..1172c070e019aea74f3476ee33439616513406e2 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -1,6 +1,6 @@
 /* OVERVIEW */
 
-.controls-manager, .secondary-monitor-workspaces {
+.secondary-monitor-workspaces {
   spacing: $base_padding * 2;
 }
 

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 9b1eaf52b584600667f856afd3ba21a6d710f40f..43817a86280185749ffb5d1f519faefb2bcb7e0b 100644 (file)
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -21,6 +21,7 @@ import * as WorkspacesView from './workspacesView.js';
 
 export const SMALL_WORKSPACE_RATIO = 0.15;
 const DASH_MAX_HEIGHT_RATIO = 0.15;
+const VERTICAL_SPACING_RATIO = 0.02;
 
 const A11Y_SCHEMA = 'org.gnome.desktop.a11y.keyboard';
 
@@ -47,8 +48,6 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         this._searchController = searchController;
         this._dash = dash;
 
-        this._spacing = 0;
-
         this._cachedWorkspaceBoxes = new Map();
         this._postAllocationCallbacks = [];
 
@@ -76,7 +75,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         this._workAreaBox.set_size(workArea.width, workArea.height);
     }
 
-    _computeWorkspacesBoxForState(state, box, searchHeight, dashHeight, thumbnailsHeight) {
+    _computeWorkspacesBoxForState(state, box, searchHeight, dashHeight, thumbnailsHeight, spacing) {
         const workspaceBox = box.copy();
         const [width, height] = workspaceBox.get_size();
         const {y1: startY} = this._workAreaBox;
@@ -89,16 +88,16 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
             break;
         case ControlsState.WINDOW_PICKER:
             workspaceBox.set_origin(0,
-                startY + searchHeight + this._spacing +
-                thumbnailsHeight + this._spacing * expandFraction);
+                startY + searchHeight + spacing +
+                thumbnailsHeight + spacing * expandFraction);
             workspaceBox.set_size(width,
                 height -
-                dashHeight - this._spacing -
-                searchHeight - this._spacing -
-                thumbnailsHeight - this._spacing * expandFraction);
+                dashHeight - spacing -
+                searchHeight - spacing -
+                thumbnailsHeight - spacing * expandFraction);
             break;
         case ControlsState.APP_GRID:
-            workspaceBox.set_origin(0, startY + searchHeight + this._spacing);
+            workspaceBox.set_origin(0, startY + searchHeight + spacing);
             workspaceBox.set_size(
                 width,
                 Math.round(height * SMALL_WORKSPACE_RATIO));
@@ -108,7 +107,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         return workspaceBox;
     }
 
-    _getAppDisplayBoxForState(state, box, searchHeight, dashHeight, workspacesBox) {
+    _getAppDisplayBoxForState(state, box, searchHeight, dashHeight, workspacesBox, spacing) {
         const [width, height] = box.get_size();
         const {y1: startY} = this._workAreaBox;
         const appDisplayBox = new Clutter.ActorBox();
@@ -120,15 +119,15 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
             break;
         case ControlsState.APP_GRID:
             appDisplayBox.set_origin(0,
-                startY + searchHeight + this._spacing + workspacesBox.get_height() + this._spacing);
+                startY + searchHeight + spacing + workspacesBox.get_height() + spacing);
             break;
         }
 
         appDisplayBox.set_size(width,
             height -
-            searchHeight - this._spacing -
-            workspacesBox.get_height() - this._spacing -
-            dashHeight - this._spacing);
+            searchHeight - spacing -
+            workspacesBox.get_height() - spacing -
+            dashHeight - spacing);
 
         return appDisplayBox;
     }
@@ -141,20 +140,6 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         this._postAllocationCallbacks = [];
     }
 
-    vfunc_set_container(container) {
-        this._container?.disconnectObject(this);
-        this._container = container;
-        this._container?.connectObject('style-changed',
-            () => {
-                const node = this._container.get_theme_node();
-                const spacing = node.get_length('spacing');
-                if (this._spacing !== spacing) {
-                    this._spacing = spacing;
-                    this.layout_changed();
-                }
-            }, this);
-    }
-
     vfunc_get_preferred_width(_container, _forHeight) {
         // The MonitorConstraint will allocate us a fixed size anyway
         return [0, 0];
@@ -171,6 +156,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         const startY = this._workAreaBox.y1;
         box.y1 += startY;
         const [width, height] = box.get_size();
+        const spacing = Math.round(height * VERTICAL_SPACING_RATIO);
         let availableHeight = height;
 
         // Search entry
@@ -179,7 +165,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         childBox.set_size(width, searchHeight);
         this._searchEntry.allocate(childBox);
 
-        availableHeight -= searchHeight + this._spacing;
+        availableHeight -= searchHeight + spacing;
 
         // Dash
         const maxDashHeight = Math.round(box.get_height() * DASH_MAX_HEIGHT_RATIO);
@@ -191,7 +177,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         childBox.set_size(width, dashHeight);
         this._dash.allocate(childBox);
 
-        availableHeight -= dashHeight + this._spacing;
+        availableHeight -= dashHeight + spacing;
 
         // Workspace Thumbnails
         let thumbnailsHeight = 0;
@@ -202,13 +188,13 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
             thumbnailsHeight = Math.min(
                 thumbnailsHeight * expandFraction,
                 height * this._workspacesThumbnails.maxThumbnailScale);
-            childBox.set_origin(0, startY + searchHeight + this._spacing);
+            childBox.set_origin(0, startY + searchHeight + spacing);
             childBox.set_size(width, thumbnailsHeight);
             this._workspacesThumbnails.allocate(childBox);
         }
 
         // Workspaces
-        let params = [box, searchHeight, dashHeight, thumbnailsHeight];
+        let params = [box, searchHeight, dashHeight, thumbnailsHeight, spacing];
         const transitionParams = this._stateAdjustment.getStateTransitionParams();
 
         // Update cached boxes
@@ -233,7 +219,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
             const workspaceAppGridBox =
                 this._cachedWorkspaceBoxes.get(ControlsState.APP_GRID);
 
-            params = [box, searchHeight, dashHeight, workspaceAppGridBox];
+            params = [box, searchHeight, dashHeight, workspaceAppGridBox, spacing];
             let appDisplayBox;
             if (!transitionParams.transitioning) {
                 appDisplayBox =
@@ -251,7 +237,7 @@ class ControlsManagerLayout extends Clutter.LayoutManager {
         }
 
         // Search
-        childBox.set_origin(0, startY + searchHeight + this._spacing);
+        childBox.set_origin(0, startY + searchHeight + spacing);
         childBox.set_size(width, availableHeight);
 
         this._searchController.allocate(childBox);